import { PageHeaderWrapper } from '@ant-design/pro-layout';

import type { FormItem } from '@/components/FormDialog/data';
import ToeForm from '@/components/FormDialog/index';

import ToeUpload from '@/components/UploadDialog/index';
import {
  addFileData,
  delFileData,
  downloadFromMinio,
  getFileDataByPage,
  updateFileData,
  uploadFromMinio,
} from '@/services/baseData/fileData';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, message, Modal } from 'antd';
import React, { useRef, useState } from 'react';

const FileData: React.FC<{}> = () => {
  const [formVisit, setFormVisit] = useState(false); // 新建和编辑提示框
  const [formTitle, setFormTitle] = useState('新建设备'); //
  const actionRef = useRef<ActionType>();
  const [form] = Form.useForm();
  const formRef = useRef(null);

  const [uploadVisit, setUploadVisit] = useState(false); //上传按钮显示
  const uploadRef = useRef(null);
  /**
   * 穿梭框的数据设置
   */
  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 80,
    },
    {
      title: '卷名', //表头显示的名称
      dataIndex: 'bucketName', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
    },

    {
      title: '文件名', //表头显示的名称
      dataIndex: 'fileName', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
    },

    // {
    //   title: '文件显示', //表头显示的名称
    //   dataIndex: 'filePath',
    // },

    {
      title: '文件路径', //表头显示的名称
      dataIndex: 'filePath',

      render: (text, record, _, action) => [
        <img
          src={record.filePath}
          key="showpic"
          style={{
            maxHeight: '25px',
            maxWidth: '25px',
            paddingRight: '5px',
            verticalAlign: 'middle',
          }}
        />,
      ],
    },

    {
      title: '创建人', //表头显示的名称
      search: false,
      dataIndex: 'createName',
    },

    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      render: (text, record, _, action) => [
        <a
          key="editKey"
          onClick={() => {
            // console.log(record, '----测试----');
            // 编辑用户
            // setModalVisit(true);
            // setCreateOrUpdate(true);
            // setFormTitle('编辑设备');
            // form.setFieldsValue({
            //   name: record.name,
            //   id: record.id,
            // });
            // 导入文件
            downloadFromMinio({ id: record.id }).then((res) => {
              const aLink = document.createElement('a');
              document.body.appendChild(aLink);
              aLink.style.display = 'none';
              aLink.href = window.URL.createObjectURL(res);
              aLink.setAttribute('download', `${record.fileName}`);
              aLink.click();
              document.body.removeChild(aLink);
            });
          }}
        >
          下载
        </a>,
        <a
          key="deleteKey"
          onClick={async () => {
            Modal.confirm({
              title: '删除用户',
              content: '确定要删除文件吗',
              okText: '确认',
              cancelText: '取消',
              onOk: async () => {
                await delFileData({ id: record.id });
                actionRef.current.reload();
              },
            });
          }}
        >
          删除
        </a>,
      ],
    },
  ];

  const formColums: FormItem[] = [{ field: 'code1', label: '编码1', type: 'inputNumber' }];

  const handleSubmit = async () => {
    if (formTitle == '新建设备') {
      await addFileData(form.getFieldsValue());
    } else {
      await updateFileData(form.getFieldsValue());
    }

    message.success('添加成功');
    setModalVisit(false);
    // 这个爆红不用管(从新加载页面)
    actionRef.current.reload();
  };
  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <ProTable //表格Pro组件
        headerTitle="客户查询" //表头
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        toolBarRender={(action, { selectedRows }) => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              // console.log(selectedRows, '---选取多行----');
              // 1.清空form
              // setCreateOrUpdate(false);
              // setFormTitle('新建设备');
              // form.resetFields();
              // //
              // setModalVisit(true);
              setUploadVisit(true);
            }}
            type="primary"
          >
            上传文件
          </Button>,
        ]}
        request={async (params = {}, sort, filter) => {
          console.log(params, sort, filter);
          const result = await getFileDataByPage(params);
          return {
            data: result.data.content,
            total: result.data.totalElements,
            success: result.success,
          };
          // return  await new Promise({data:[{loginName:}], total:10, success: 0})
          // return {data:[], total:10, success: 0}
        }} //请求数据的地方，例子是用mock模拟数据，我是在后台请求的数据
        columns={columns} //上面定义的
        rowSelection={{}}
      />

      <ToeForm
        visible={formVisit}
        title="新建表单"
        disable={false}
        ref={formRef}
        columns={formColums}
        onCancel={() => {
          setFormVisit(false);
        }}
        onOk={() => {
          console.log(formRef.current.getFormData());
        }}
      />

      <ToeUpload
        onCancel={() => {
          setUploadVisit(false);
        }}
        ref={uploadRef}
        onOk={async () => {
          const formData = new FormData();
          console.log(uploadRef.current.fileList, '文件测试---');
          uploadRef.current.fileList.map((file) => {
            formData.append('file', file);
          });
          // formData.append('file', 'jja');
          console.log(formData, '---formData--');
          await uploadFromMinio(formData);
          setUploadVisit(false);
        }}
        visible={uploadVisit}
        title="文件上传"
      />
    </PageHeaderWrapper>
  );
};

export default FileData;
